<template>
  <ele-card :body-style="{ paddingBottom: '2px' }">
    <div class="donut-chart-container">
      <v-chart class="donut-chart" :option="chartOption" :autoresize="true" />
    </div>
  </ele-card>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { PieChart } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';

  // 注册必要的组件
  use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
  ]);

  const props = defineProps({
    /** 统计数据 */
    data: {
      type: Array,
      default: () => [
        { value: 335, name: '类别A' },
        { value: 310, name: '类别B' },
        { value: 234, name: '类别C' },
        { value: 135, name: '类别D' },
        { value: 1548, name: '类别E' }
      ]
    }
  });

  // 图表配置
  const chartOption = ref({
    title: {
      left: 'center',
      top: 20,
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {},
    legend: {
      data: props.data.map((item) => item.name),
    },
    series: [
      {
     
        name: '',
        type: 'pie',
        radius: ['60%', '70%'], // 控制环形的大小，内半径和外半径
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
       
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: props.data
      }
    ]
  });

  onMounted(() => {
    // 可以在这里进行数据的异步加载和更新
    // 例如：fetchData().then(data => { chartOption.value.series[0].data = data; });
  });
</script>

<style scoped>
  .donut-chart-container {
    width: 100%;
    height: 100%;
    height: 30vh;
  }

  .donut-chart {
    width: 100%;
    height: 100%;
  }
</style>
